

import React from 'react';
// 引入 新闻组件和关于组件
import News from './News'
import About from './About'
// 引入路由导航组件和坑组件
import {Link,Route,useHistory,useLocation,useParams} from 'react-router-dom'
const Index = () => {
     // 如下 : 相当于类组件中的this.props.histpry
     const his = useHistory()
     // 如下: 相当于类组件中的 this.props.location
     const loc = useLocation()
     // 如下: 相当于 类组件中的 this.props.match.params
     const par = useParams()


    // 定义跳转页面的go函数
    const go = (url)=>{
        // 类组件中使用的编程式导航语法: this.props.history.push(url)
        his.push(url)
    //    console.log('go');
    }
    return (
        <div>
            {/*定义导航组件  */}
            {/* <p>
                <Link to='/news'>新闻</Link>
                <Link to='/about'>关于</Link>
            </p> */}

            {/* 定义编程式导航 */}
            <p>
                <span onClick={()=>go('/news?id=1')}>新闻</span>
                {/* <span onClick={()=>go({pathname:'/about',search:'id=99', state:{a:1,b:2}})}>关于</span> */}
                <span onClick={()=>go('/about/88')}>关于</span>
            </p>

            {/* 定义路由显示的坑 */}
            <Route path='/news' component={News}></Route>
            <Route path='/about/:id?' component={About}></Route>
        </div>
    );
}

export default Index;
